<template>
  <div class="box">
    <van-nav-bar
      title="购物车(0)"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-empty description="购物车无内容" v-if="show === true">
      <van-button round type="danger" class="bottom-button"
        >立即购物</van-button
      >
    </van-empty>

    <!-- 加入购物车 -->
    <!-- <div class="cart" v-else> -->
    <!-- <van-swipe-cell v-for="item in cartData" :key="item.proid" class="cartKP">
      
      <van-card
        class="goods-card"
        :num="item.num"
        :price="item.originprice"
        :desc="item.proname"
        :thumb="item.img1"
      ><van-checkbox v-model="checked"></van-checkbox>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
        <template #footer>
          <van-button size="mini" class="btn1">-</van-button>
          <van-button size="mini" class="btn2">+</van-button>
        </template>
      </van-card>
    </van-swipe-cell> -->
    <!-- </div> -->

    <!-- <van-card
        :price="item.originprice"
        :desc="item.proname"
        class="goods-card"
        :thumb="item.img1"
      /> -->
    <ul>
      <li v-for="item in cartData" :key="item.proid">
        <van-swipe-cell class="checkBox">
          <van-checkbox v-model="checked"></van-checkbox>
          <img :src="item.img1" alt="" />
          <div>
            <p>{{ item.proname }}</p>
            <span>￥{{ item.originprice }}</span>
          </div>
          <van-stepper
            v-model="item.num"
            theme="round"
            button-size="22"
            disable-input
          />
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </li>
    </ul>

    <!-- <template #footer> -->
    <!-- <van-button size="mini" class="btn1">-</van-button>
        <van-button size="mini" class="btn2">+</van-button> -->
    <!-- <van-stepper v-model="value" theme="round" button-size="22" disable-input /> -->
    <!-- </template> -->

    <!-- 推荐商品列表 -->
    <span class="need">可能你还想要</span>
    <ul>
      <li
        v-for="item in recommendData"
        :key="item"
        @click="goAbout(item.proid)"
      >
        <div>
          <img :src="item.img1" alt="" />
          <p class="p1">{{ item.proname }}</p>
          <p class="p2">￥{{ item.originprice }}</p>
        </div>
      </li>
    </ul>
    <van-submit-bar :price="100" button-text="合并" @submit="onSubmit">
      <van-checkbox v-model="checked" @click="checkedAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { recommendList, checkCartList } from "../service/banner.js";
import { showNotify, closeNotify } from "vant";
export default {
  data() {
    return {
      cartData: [],
      recommendData: [],
      checked: true, // 全选
      show: true, // 显示 空状态
      value: 1,
    };
  },
  created() {
    this.recommendListData();
    checkCartList({ userid: this.$store.state.userInfo.data.userid }).then(
      (res) => {
        // console.log(res.data);
        this.cartData = res.data.data;
        console.log(this.cartData);
        if (this.cartData !== []) {
          this.show = false;
        }
      }
    );
  },
  methods: {
    onClickLeft() {
      history.back();
    },
    recommendListData() {
      recommendList().then((res) => {
        // console.log(res.data);
        if (res.data.code === "200") {
          this.recommendData = res.data.data;
          // console.log(this.recommendData);
        }
      });
    },
    onSubmit() {
      console.log("点击按钮");
    },
    checkedAll() {
      // 3 秒后自动关闭
      // showNotify("通知内容");
      showNotify({ type: "danger", message: "通知内容" });
      // 主动关闭
      closeNotify();
    },
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
img {
  width: 100%;
  height: 100%;
  display: block;
}
ul,
li {
  list-style: none;
}
.box {
  text-align: center;
}
.bottom-button {
  width: 160px;
  height: 40px;
}
.need {
  font-size: 14px;
  color: gray;
}

ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
li {
  width: 48%;
  /* height: 320px; */
  margin-right: 1%;
}
li > div {
  width: 100%;
  height: 100%;
}
li > div > img {
  height: 200px;
}
li > div > .p1 {
  font-size: 12px;
  font-weight: bold;
  display: -webkit-box;
  overflow: hidden;
  flex-direction: row;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  line-height: 20px;
  margin-top: 10px;
}

li > div > .p2 {
  color: red;
  font-size: 16px;
  font-weight: 700;
  margin: 2px 0px;
  padding-bottom: 10px;
}

.cart {
  display: flex;
  flex-direction: column;
}
.cartKP {
  width: 100%;
  display: flex;
  flex-direction: row;
  border: 1px solid gray;
}
.van-card goods-card {
  background-color: white;
  margin-left: 20px;
  height: 90px;
  line-height: 90px;
  margin-left: 20px;
}

.delete-button {
  width: 50px;
  height: 100%;
}

.van-swipe-cell__wrapper {
  width: 420px;
  height: 140px;
  background-color: aquamarine;
}
.van-card__header {
  display: flex;
}
.van-checkbox {
  height: 100%;
  margin-top: 34px;
}

.van-stepper--round {
  margin-right: 0px;
}
ul>li{
  width: 100%;
  display: flex;
  flex-direction: row;
}
.checkBox{
  /* display: flex; */
  font-size: 14px;
  float: left;
}
.checkBox>div{
  display: flex;
}
.checkBox img{
  width: 100px;
  height:100px;
}
</style>
